<template>
	<page-meta :page-style="themeColor"></page-meta>
	<!-- <uni-navbar></uni-navbar> -->
	<view :style="{ backgroundColor: bgColor, minHeight: 'calc(100vh - 55px)' }" class="page-img">

		<!-- 活动 -->
		<view class="activity-box">
			<view class="activity-item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
				<uni-transition :duration="index < 10 ? 300 * (index + 1) : 300 * (index - parseInt(index/10)*10 + 2)"
					:mode-class="modeClass" :show="transShow">
					<view>
						<u-image :src="item.img" mode="widthFix" v-show="transShow"></u-image>
					</view>
				</uni-transition>
			</view>
		</view>


		<!-- 底部tabBar -->
		<view class="page-bottom">
			<diy-bottom-nav></diy-bottom-nav>
		</view>

	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import nsNavbar from '@/components/ns-navbar/ns-navbar.vue';
	import uniTransition from '@/components/uni-transition/components/uni-transition/uni-transition.vue'

	export default {
		components: {
			uniPopup,
			nsNavbar,
			uniTransition
		},
		data() {
			return {
				list: [],
				modeClass: ['fade'],
				transShow: false
			}
		},
		onLoad() {
			this.transShow = false
			this.list.length = 0
			this.getImgList()
			this.modeClass = ['slide-bottom']
			this.$nextTick(() => {
				setTimeout(() => {
					this.transShow = true
				}, 500)
			})
		},
		methods: {
			goDetail(val) {
				uni.navigateTo({
					url: "/pages/index/detail"
				})
			},
			getImgList() {
				this.list = [{
						img: 'https://transtorecc.oss-cn-beijing.aliyuncs.com/transtorecc/2024-1-264.jpg'
					},
					{
						img: 'https://transtorecc.oss-cn-beijing.aliyuncs.com/transtorecc/2024-1-264.jpg'
					},
				]
			}
		}
	};
</script>

<style lang="scss">
	@import '@/common/css/diy.scss';

	.activity-box {
		margin: 0 30rpx;

		.activity-item {
			width: 100%;
			margin-bottom: 30rpx;

			image {
				width: 100%;
				border-radius: 20rpx;
			}
		}
	}

	::v-deep .u-image__image {
		border-radius: 20rpx !important;
	}
</style>

<style scoped>
	.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
		background: none !important;
	}

	/deep/ .placeholder {
		height: 0;
	}

	/deep/::-webkit-scrollbar {
		width: 0;
		height: 0;
		background-color: transparent;
		display: none;
	}

	/deep/ .ns-copyright-info {
		margin-top: 40rpx;
		margin-bottom: 0;
	}
</style>